<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4610055_t8my2a4wygf.css">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="css/food.css" rel="stylesheet">
    <script src="js/index.js"></script>
    <title>拼多多食品</title>
</head>
<body>
<!-- 总容器 -->
<div class="wrapper">
    <!-- search部分 -->
    <div class="search">
        <div class="search-fixed-top" id="fixedBox">
            <div class="search-box">
                <span class="fa fa-search"> 正装大学生女西装</span><i class="iconfont icon-zhaoxiangji"></i>
            </div>
        </div>
    </div>
    <!-- 点餐分类部分 -->
    <ul class="activitytype" id="activitytype">
        <li>
            <p>推荐</p>
        </li>
        <li>
            <p>百货</p>
        </li>
        <li>
            <p>女装</p>
        </li>
        <li class="food">
            <p style="color:indianred">食品</p>
        </li>
        <li>
            <p>饰品</p>
        </li>
        <li>
            <p>手机</p>
        </li>
        <li>
            <p>美妆</p>
        </li>
    </ul>
    <!-- 横幅广告部分 -->
    <div class="activity">
        <ul class="activity-list">
            <li>
                <img src="img/乳品冲饮.png">
                <div class="activity-info">
                    <p>乳品冲饮</p>
                </div>
            </li>
            <li>
                <img src="img/坚果蜜饯.png">
                <div class="activity-info">
                    <p>坚果蜜饯</p>
                </div>
            </li>
            <li>
                <img src="img/地方农货.png">
                <div class="activity-info">
                    <p>地方农货</p>
                </div>
            </li>
            <li>
                <img src="img/休闲零食.png">
                <div class="activity-info">
                    <p>休闲零食</p>
                </div>
            </li>
            <li>
                <img src="img/饼干糕点.png">
                <div class="activity-info">
                    <p>饼干糕点</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="activity">
        <ul class="activity-list">
            <li>
                <img src="img/粮油速食.png">
                <div class="activity-info">
                    <p>粮油速食</p>
                </div>
            </li>
            <li>
                <img src="img/营养保健.png">
                <div class="activity-info">
                    <p>营养保健</p>
                </div>
            </li>
            <li>
                <img src="img/中外名酒.png">
                <div class="activity-info">
                    <p>中外名酒</p>
                </div>
            </li>
            <li>
                <img src="img/滋补养生.png">
                <div class="activity-info">
                    <p>滋补养生</p>
                </div>
            </li>
            <li>
                <img src="img/茶叶.png">
                <div class="activity-info">
                    <p>茶叶</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="advertising">
        <div class="phb">
            <div class="phb-info">
                <p><span  class="iconfont icon-paihangbang"></span>排行榜</p>
                <p1>每日更新</p1>
            </div>
            <img src="img/food-phb.png">
        </div>
        <div class="xbtj">
            <div class="xbtj-info">
                <p>小编推荐</p>
                <p1>精选好货</p1>
            </div>
            <img src="img/food-xbtj.png">
        </div>


    </div>
    <div class="commodity">
        <ul class="left">
            <img src="img/food-sp01.png">
            <div class="left-info1">
                <h3>秒杀</h3>&nbsp;
                <h3 style="background-color: #333333;color: cornsilk">品牌</h3>
                <p>浙梅桑葚山楂条</p>
            </div>
            <div class="left-info2">
                <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                <p style="color: indianred">&nbsp;旗舰店</p>
                <p style="color: #888888">正品险</p>
            </div>
            <div class="left-info3">
                <div class="p1" style="color: indianred">
                    <span class="larger">历史低价&#165;</span><span class="larger">7</span><span class="smaller">.45</span>
                </div>
                <p>已拼1.2万+斤</p>
            </div>
        </ul>
        <ul class="right">
            <img src="img/food-sp02.png">
            <div class="right-info1">

                <p>【热卖50包】魔芋贡菜</p>
            </div>
            <div class="right-info2">
                <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                <p style="color: indianred">&nbsp;立减1元</p>
                <p style="color: #AAAAAA">&nbsp;极速退款</p>
            </div>
            <div class="right-info3">
                <div class="p1" style="color: indianred">
                    <span class="larger">券后&#165;</span><span class="larger">12</span><span class="smaller">.02</span>
                </div>
                <p>店铺回购7702件</p>
            </div>
        </ul>

    </div>
    <div class="commodity">
        <ul class="left">
            <img src="img/food-sp03.png">
            <div class="left-info1">
                <h3>暑假大促</h3>
                <p>金堆谷手磨嫩豆干</p>
            </div>
            <div class="left-info2">
                <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                <p style="color: indianred">&nbsp;好评超99%同款</p>
            </div>
            <div class="left-info3">
                <div class="p1" style="color: indianred">
                    <span class="larger">券后&#165;</span><span class="larger">34</span><span class="smaller">.9</span>
                </div>
                <p>店铺好评2.1万+件</p>
            </div>
        </ul>
        <ul class="right">
            <img src="img/food-sp04.png">
            <div class="right-info1">
                <p>【团购冲量】口水娃贡菜</p>
            </div>
            <div class="right-info2">
                <p class="iconfont icon-jisufu_xianyonghoufulogo" style="color: #38CA73">先用后付</p>
                <p style="color: #AAAAAA">&nbsp;好评超88%同款</p>
            </div>
            <div class="right-info3">
                <div class="p1" style="color: indianred">
                    <span class="larger">券后&#165;</span><span class="larger">3</span><span class="smaller">.92</span>
                </div>
                <p>已拼200万+袋</p>
            </div>
        </ul>

    </div>
    <br>
    <br>
    <!--底部菜单部分-->
    <ul class="footer">
        <li onclick="location.href='index.html'">
            <i class="iconfont icon-shouyexuanzhong-copy" style="color: red"></i>
            <p style="color: red">首页</p>
        </li>
        <li>
            <i class="iconfont icon-shipin"></i>
            <div class="icon-quantity">3</div> <!-- 添加数字 -->
            <p>多多视频</p>
        </li>
        <li>
            <img src="img/618.png">
            <p>618大促</p>
        </li>
        <li onclick="location.href='chat.html'">
            <i class="iconfont icon-liaotianjilu"></i>
            <div class="icon-quantity">99+</div> <!-- 添加数字 -->
            <p>聊天</p>
        </li>
        <li onclick="location.href='my.html'">
            <i class="iconfont icon-gerenzhongxin-zhihui"></i>
            <p>个人中心</p>
        </li>
    </ul>
</div>

</html>